<template>
  <div class="ai-test_one">
    <div class="ai-test-one_head">
      <p class="test_title">AI智能测评，1分钟知道自己适合学什么</p>
      <p class="test_con">(截至目前已有3765名同学参与测试)</p>
    </div>
    <div class="xueli" v-for="it in datas" :key="it.id">
      <div class="xueli_one">{{ it.title }}</div>
      <div class="xueli_two">
        <div
          v-for="its in it.items"
          :class="
            'xueli_two_1 ' +
            (it.id === 0
              ? its.id === checkDate['one']
                ? 'div'
                : ''
              : its.id === checkDate['two']
              ? 'div'
              : '')
          "
          :key="its.id"
          v-on:click="
            it.id === 0
              ? (checkDate['one'] = its.id)
              : (checkDate['two'] = its.id)
          "
        >
          {{ its.title }}
        </div>
      </div>
    </div>
    <div class="form">
        <form action class="form1">
          <input
            type="text"
            placeholder="请填写你的电话/微信"
            class="form-ipt"
          />
          <button type="button">点击提交获取测评结果</button>
        </form>
      </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
const checkDate = ref({
  one: 0,
  two: 0,
});
const datas = ref([
  {
    title: "你目前的学历？",
    id: 0,
    items: [
      {
        title: "初中",
        id: 0,
      },
      {
        title: "高中",
        id: 1,
      },
      {
        title: "网教",
        id: 2,
      },
      {
        title: "学士",
        id: 3,
      },
    ],
  },
  {
    title: "你的意向专业？",
    id: 1,
    items: [
      {
        title: "空乘",
        id: 0,
      },
      {
        title: "地勤",
        id: 1,
      },
      {
        title: "高铁乘务",
        id: 2,
      },
      {
        title: "游轮海乘",
        id: 3,
      },
    ],
  },
]);
</script>

<style scoped>
.ai-test_one {
  width: 100%;
  height: auto;
  border: 0.001rem solid #e0e0e0;
  border-top-left-radius: 0.2rem;
  border-top-right-radius: 0.2rem;
  margin-top: 0.4rem;
  overflow: hidden;
  padding-bottom: 0.4rem;
}
.ai-test-one_head {
  width: 100%;
  height: 2.4rem;
  background-color: #1aa3ee;
}
.test_title {
  width: 100%;
  text-align: center;
  line-height: 1.4rem;
  color: #fff;
  font-size: 0.6rem;
}
.test_con {
  width: 100%;
  line-height: 1rem;
  font-size: 0.4rem;
  color: #fff;
  text-align: center;
}
.xueli {
  width: 80%;
  height: 3rem;
  margin: 0.2rem auto 0.4rem;
  border-bottom: 0.001rem solid #ccc;
}
.xueli_one {
  color: #666;
  width: 100%;
  font-size: 0.6rem;
}
.xueli_two {
  width: 100%;
  height: 1.8rem;
  display: flex;
  justify-content: space-between;
}
.xueli_two div {
  height: 1.4rem;
  line-height: 1.4rem;
  padding: 0 0.5rem;
  font-size: 0.6rem;
  color: #666;
  background-color: #efefef;
  border-radius: 0.4rem;
  margin-top: 0.2rem;
}
.xueli_two .div {
  color: #fff;
  background-color: orange;
}
</style>